<template>
    <div class="app-container">
        <el-card class="section-purpose" shadow="hover">
            <h2>项目介绍 </h2>
            <el-divider />
            <el-text type="primary">
                有时候想写代码的心是藏不住的，既让如此，那就干，于是诞生了它，IM.Easy，顾名思义，让开发更加简单。
            </el-text>
        </el-card>
        <!-- 开源初衷 -->
        <el-card class="section-purpose" shadow="hover">
            <h2>开源初衷</h2>
            <el-divider />
            <el-descriptions border :column="1">
                <el-descriptions-item label="我们的初衷">
                    让技术更加开放，让.net更加受欢迎，助力开发者快速构建高效、可靠的应用。希望通过分享我们的经验和工具，与社区共同成长，共创未来。
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <!-- 技术栈 -->
        <el-card class="section-tech-stack" shadow="hover">
            <h2>技术栈</h2>
            <el-divider></el-divider>
            <ul class="tech-stack-list">
                <li>
                    <strong>前端：</strong> Vue 3 + Vite + Element Plus
                </li>
                <li>
                    <strong>后端：</strong> .NET 8.0 + SqlSugar
                </li>
                <li>
                    <strong>数据库：</strong> MySQL 8.0
                </li>
                <li>
                    <strong>其他：</strong> SignalR 实时通信、JWT 鉴权
                </li>
            </ul>
        </el-card>

        <!-- 助力工具 -->
        <el-card class="section-support" shadow="hover">
            <h2>助力工具</h2>
            <el-divider />
            <el-row>
                <el-col :span="24">
                    <p>开源不易，坚持不易，您的一剂兴奋剂会让我跑得更远，感谢支持！随手一个star⭐⭐⭐是对我莫大的鼓励! 👉
                        <el-link type="primary" href="https://gitee.com/mrwangRefreshing/IM.Easy"
                            target="_blank">gitee源码地址</el-link>
                    </p>
                </el-col>

                <el-col :span="12">
                    <!-- <el-image
                            src="path-to-your-qrcode.jpg"
                            alt="支持二维码"
                            class="qr-code"
                            fit="contain"
                        /> -->
                </el-col>
            </el-row>
        </el-card>

        <!-- 联系方式 -->
        <el-card class="section-feedback" shadow="hover">
            <h2>联系我</h2>
            <el-divider />
            <p>有任何建议或反馈，欢迎通过以下方式联系我们：</p>
            <el-row class="contact-list" :gutter="20">
                <el-col :span="24">
                    <strong>Email：</strong>refreshingqin@163.com
                </el-col>
                <el-col :span="24">
                    <strong>QQ：</strong>1017490297
                </el-col>
                <el-col :span="24">
                    <strong>Gitee Issues：</strong>
                    <el-link type="primary" href="https://gitee.com/mrwangRefreshing/IM.Easy"
                        target="_blank">gitee源码地址</el-link>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup name="index"></script>

<style scoped>
/* .app-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
} */

.app-container {
    overflow-y: scroll;
    height: 100%;
    position: absolute;
    width: 100%;
}

.page-header {
    text-align: center;
    background-color: #f5f5f5;
}

.qr-code {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
}

.section-tech-stack {
    margin: 20px 0;
}

.tech-stack-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-stack-list li {
    margin: 8px 0;
}
</style>
